<template>
  <section id="cityTree">
    <el-dialog class="about-set" title="县村选择" :visible.sync="labelVisible" width="560px"
               :before-close="labelHandleClose">
      <el-tree
        :props="props1"
        :load="loadNode1"
        lazy
        accordion
        @node-click="handleNodeClick">
      </el-tree>
      <span slot="footer" class="dialog-footer">
      <el-button @click="cancelLabel">取 消</el-button>
      <el-button type="primary" @click="confirmLabel" :loading="loading">确 定</el-button>
    </span>
    </el-dialog>
  </section>
</template>

<script>
  export default {
    name: "cityTree",
    msg: "县村选择多级列表",
    props: [],
    data() {
      return {
        props1: {
          label: 'name',
          children: 'zones',
          isLeaf: 'leaf'
        },
        selectNode:{},
        count: 1,
        labelVisible: false,
        loading: false,//仿重复提交
      }
    },
    mounted() {
      /*this.getRelationData();*/
    },
    methods: {
      handleNodeClick(data) {
       /* console.log(JSON.stringify(data));*/
        this.selectNode={...data};
      },
      loadNode1(node, resolve) {
        if (node.level === 0) {
          return resolve([{name: '汶上县'}]);
        }
        if (node.level > 2) return resolve([]);
        let data = [];
        setTimeout(() => {
          switch (node.level) {
            case 1:
              data = [
                {name: '汶上街道'},
                {name: '南站镇'},
                {name: '南旺镇'},
              ];
              break;
            case 2:
              data = [
                {name: '村子1', leaf: true},
                {name: '村子2', leaf: true},
                {name: '村子3', leaf: true},
              ];
              break;
          }
          /* const data = [{
             name: '汶上街道',
             /!*leaf: true*!/
           }, {
             name: 'zone'
           }];*/
          resolve(data);
        }, 500);
      },
      labelHandleClose(done) {
        this.cancelLabel();
        done();
      },
      confirmLabel() {
        this.loading = true;
        this.$emit("getCityName", this.selectNode);
        this.cancelLabel();
      },
      cancelLabel() {
        //关闭前清空
        this.selectNode={};
        this.labelVisible = false;
        this.loading = false;
      },
      /*显示分类*/
      showModel() {
        this.labelVisible = true;
      },
    },
  }
</script>

<style lang="less">
  #cityTree {
    .el-checkbox {
      margin-right: 10px !important;
    }

    .about-set {
      .el-dialog {
        padding-bottom: 15px;
      }

      .el-dialog__header {
        border-bottom: 1px solid #eee;
      }

      .el-dialog__title {
        font-size: 14px;
      }

      .el-dialog__body {
        background: #f6f6f6;
        margin: 16px 20px;
        padding: 10px;
        height: 370px;
        overflow: auto;
      }

      .el-button {
        padding: 8px 15px;
      }

      .el-radio-group {
        line-height: 40px;
      }

      .el-form-item__content {
        margin-top: 4px;
      }

      .el-radio {
        margin-left: 0;
        margin-right: 30px;
      }

      .el-tree-node__content {
        background: #f6f6f6;
      }

      .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
      }

      .el-tree-node:focus > .el-tree-node__content {
        background: #ddd;
      }
    }
  }
</style>
